<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap{
            width: 200px;
            height: 400px;
            border: 1px solid;
            position: absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin: auto;
        }
        #wrap div,#wrap p,#wrap span{
            display: inline-block;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 1px solid black;
            box-sizing: border-box;
        }


        /*#wrap .item:nth-child(3){
            background: pink;
        }*/

        /*以元素为中心*/
        /*#wrap .item:nth-of-type(3){
            background: pink;
        }*/
        #wrap div:nth-of-type(3){
            background: pink;
        }
        #wrap p:nth-of-type(3){
            background: pink;
        }
        #wrap span:nth-of-type(3){
            background: pink;
        }
        /*nth-child*/
        /*nth-of-type*/
    </style>
</head>
<body>
    <!--容器-->
    <div id="wrap">
        <!--项目-->
        <div class="item">1</div>
        <div class="item">2</div>
        <p class="item">3</p>
        <div class="item">4</div>
        <span class="item">5</span>
        <span class="item">5</span>
        <span class="item">5</span>
        <div class="item">6</div>
        <p class="item">7</p>
        <p class="item">8</p>
    </div>
</body>
</html>